
<template>
  <header class="header">
    <!--顶部导航栏-->
    <div class="top">
      <div class="top-content clearfix">
          <ul class="nav l">
            <li class="nav-item"><img class="company-logo" :src="companyLogo"></li>
            <li class="nav-item"><span class="company-name">Chelsea FC</span></li>
            <li class="nav-item">
              <router-link to="/views/home">
                <span class="home-icon"><i class="iconfont">&#xe661;</i></span>
              </router-link>
            </li>
          </ul>
          <ul class="nav r">
            <transition name="input-search-show">
            <li v-show="showSearch" class="nav-item search-content">
              <span><input  class="search-input" type="search" placeholder="search"></span>
              <span class="search-input-icon"><i class="iconfont">&#xe667;</i></span>
            </li>
            </transition>
            <li v-show="!showSearch" class="nav-item" @click="showSearch=true"><span class="search-icon"><i class="iconfont">&#xe667;</i></span></li>
            <li class="nav-item">
              <router-link to="/views/home/help">
              <span class="help-icon"><i class="iconfont">&#xe664;</i></span>
              </router-link>
            </li>
            <li class="nav-item avatar-content">
              <img class="top-img avatar" :src="avatar">
              <span class="drop-down-icon"><i class="iconfont">&#xe60a;</i></span>
              <ul class="avatar-drop">
                <li class="avatar-drop-item name">Eden  Hazard</li>
              <!--  <li class="avatar-drop-item"><i class="iconfont">&#xe669;</i>View  Profile</li>-->
                <li @click="toMyAccount" class="avatar-drop-item"><i class="iconfont">&#xe670;</i>My Account</li>
                <li @click="logoOut" class="avatar-drop-item"><i class="iconfont">&#xe660;</i>Sign Out</li>
              </ul>
            </li>
            <li class="nav-item"><img class="top-img daydao-logo"  :src="daydaoLogo"></li>
          </ul>
      </div>
      <div class="nav"></div>
    </div>
    <!--菜单列表-->
    <menu class='menu'>
      <div class="menu-content clearfix">
        <div class="main-menu l">
          <div class="main-menu-list">
            <i class="iconfont" v-if="mainMenuName">&#xe61c;</i>
            <ul class="menu-drop animated fadeIn">
              <li class="menu-drop-item" v-for="(item,key) in menuData" :key="key" :class="{'active': path.indexOf(item.menuUrl)>-1}"><router-link :to="item.menuUrl">{{item.menuName}}</router-link></li>
            </ul>
          </div>
          <span class="main-menu-active">{{mainMenuName}}</span>
        </div>
       <div class="sub-menu r">
          <ul class="sub-menu-list">
            <li class="sub-menu-item" v-for="(item,key) in subMenuData" :key="key" :class="{'active':path.indexOf(item.menuUrl)>-1}">
              <router-link :to="item.menuUrl">{{item.menuName}}<i class="iconfont drop-icon" v-if="getSubMenu(subMenuData,item.menuUrl).length">&#xe60a;</i></router-link>
              <div v-if="getSubMenu(subMenuData,item.menuUrl).length" class="third-menu-content">
                <ul class="third-menu-list animated fadeIn" v-if="getSubMenu(subMenuData,item.menuUrl).length">
                  <li class="third-menu-item" v-for="(item,key) in getSubMenu(subMenuData,item.menuUrl)" :key="key" :class="{'active':path.indexOf(item.menuUrl)>-1}"><router-link :to="item.menuUrl">{{item.menuName}}</router-link></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </menu>

  </header>
</template>
<script>
  import daydaoLogo from '../../assets/images/logo.png'
  import companyLogo from '../../assets/images/company_logo.png'
  import avatar from '../../assets/images/avatar.png'
  export default {
    name: 'header',
    created() {
      this.init();
    },
    beforeRouteEnter(to, from, next){
      debugger
    },
    data() {
      return {
        daydaoLogo,
        companyLogo,
        avatar,
        showSearch:false,
        menuData: null,
        mainMenuName:'',
        subMenuData :null,
        menuInfo:null,
        path:'',
      }
    },
    watch:{
      menuData(newData,oldData){
        this.path = this.$route.path;
        this.initMenu(newData,this.path);
      },
      '$route'(to, from){
        if(!this.menuData){
          return;
        }
        this.path = to.path;
        this.initMenu(this.menuData,this.path);
      }
    },
    methods:{
      init(){
        var t = this;
        this.getHeaderData().then((data)=>{this.menuData = data.beans[0].nodes});
        $(document).ajaxStart(function(){
          t.$store.commit('setGlobalLoading',true);
        }).ajaxComplete(function(){
          t.$store.commit('setGlobalLoading',false);
        });
      },
      initMenu(data,path){
        for(var i = 0 ;i < data.length;i++){
          if(path.indexOf(data[i].menuUrl) > -1){
            this.mainMenuName = data[i].menuName;
            this.subMenuData = data[i].leaves;
          }
        }
      },
      getHeaderData(){
        return new Promise((resolve, reject) => {
          $.ajax({
              url:config.apiBase + '/home/homeIndex/index.do',
              dataType:'json',
              type:'get',
              success:function (data) {
              	console.log(data)
                resolve(data);
              }
          });
        });
      },
      getSubMenu(data,url){
        for(var i = 0 ;i < data.length;i++){
          if(data[i].menuUrl == url){
              return data[i].leaves;
          }
        }
      },
      logoOut(){
        window.location.href = '/views/common/logout.jsp';
      },
      toMyAccount(){
        window.location.href = config.accountDomain + '/person/userCenter';
      }
    }
  }
</script>

<style  rel="stylesheet/scss" type="text/css" lang="scss" scoped >
  @import "src/assets/css/variable";
  .header{
    .top{
      width: 100%;
      height: 56px;
      background-color: $baseColor;
      .top-content{
        max-width: $maxWidth;
        min-width:1200px;
        width:100%;
        height: 56px;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 0 53px 0 50px;
        color: #fff;
        .nav{
          .nav-item{
            display: inline-block;
            height: 56px;
            line-height: 56px;
            vertical-align: middle;
            margin-right: 30px;
            &:last-child{
              margin-right: 0;
            }
            /*搜索框*/
            &.search-content{
              position: relative;
              .search-input{
                box-sizing: border-box;
                width: 210px;
                height: 34px;
                padding: 2px 30px 2px 10px;
                color: #fff;
                outline: 0;
                border: 1px solid #FFFFFF;
                border-radius: 100px;
                background-color: rgba(255,255,255,0);
              }
              .search-input-icon{
                position: absolute;
                top:0;
                right: 12px;
                .iconfont{
                  font-size: 18px;
                  color: #fff;
                }
              }
            }
            /*个人头像*/
            &.avatar-content{
              position: relative;
              padding: 0 1px 0 8px;
              margin-right: 25px;
              cursor: pointer;
              z-index:101;
              .drop-down-icon{
                .iconfont{
                  font-size: 18px;
                }
              }
              &:hover{
                .avatar-drop{
                  display: block;
                }
                background-color: #fff;
                .drop-down-icon{
                  .iconfont{
                    color: $baseColor;
                  }
                }
              }
              .avatar{
                padding-right: 0;
              }
              .drop-down-icon{
                .iconfont{
                  color: #fff;
                  vertical-align: top;
                  font-size: 30px;
                  margin: 0;
                }
              }
              /*hover 显示 dropDown 内容*/
              .avatar-drop{
                position: absolute;
                display: none;
                top: 56px;
                right: 0px;
                width: 140px;
                font-size: 14px;
                color: #96ACB9;
                background-color: #fff;
                box-shadow: 0 7px 8px 0 rgba(200,217,232,0.60);
                z-index: 101;
                .avatar-drop-item{
                  line-height: 28px;
                  margin: 8px 0;
                  padding: 0 16px;
                  white-space: nowrap;
                  &:not(.name):hover{
                    background: $baseColor;
                    color: #fff;
                    .iconfont{
                      color: #fff;
                    }
                  }
                  &.name{
                    color: $baseColor;
                  }
                  .iconfont{
                    font-size: 14px;
                    color: #96ACB9;
                    margin-right: 12px;
                  }
                }
              }
            }

            .top-img{
              height: 34px;
              vertical-align: middle;
              &.daydao-logo{
                height: 38px;
                margin-right: 0;
              }
            }
            .company-logo{
              height: 36px;
              vertical-align: middle;
            }
            .company-name{
              /*font-family: HelveticaNeue;*/
              font-size: 20px;
            }
            .home-icon,.help-icon,.search-icon{
              display: inline-block;
              .iconfont{
                font-size: 25px;
                color: #fff;
                vertical-align: top;
                transition: all .3s;
              }
              &:hover{
               .iconfont{
                 opacity: .8;
                }
              }
            }
          }
        }
      }
    }

    .menu {
      width: 100%;
      line-height: 56px;
      padding: 0;
      margin: 0;
      background: #FFFFFF;
      box-shadow: 0 1px 4px 0 rgba(200,217,232,0.60);
      .menu-content {
        box-sizing: border-box;
        max-width: $maxWidth;
        width: 100%;
        margin: 0 auto;
        height: 100%;
        padding: 0 47px 0 50px;
        line-height: 56px;
        .main-menu {
          box-sizing: border-box;
          width: 300px;
          height: 56px;
          text-align: left;
          .main-menu-list {
            display: inline-block;
            position: relative;
            margin-right: 42px;
            height: 56px;
            line-height: 56px;
            &:hover .menu-drop {
              display: block;
            }
            .iconfont {
              font-size: 34px;
              vertical-align: top;
            }
            .menu-drop {
              display: none;
              position: absolute;
              top: 53px;
              left: -6px;
              line-height: 36px;
              font-size: 14px;
              color: #333;
              background-color: #fff;
              box-shadow: 2px 7px 8px 0 rgba(200,217,232,0.60);
              border: 1px rgba(200,217,232,0.40) solid;
              z-index: 100;
              &:before {
                content: "";
                position: absolute;
                top: -17px;
                left: 16px;
                width: 0;
                height: 0;
                border: 8px transparent solid;
                border-bottom-color: rgba(200,217,232,0.40);
              }
              &:after {
                content: "";
                position: absolute;
                top: -16px;
                left: 16px;
                width: 0;
                height: 0;
                border: 8px transparent solid;
                border-bottom-color: #fff;
              }
              .menu-drop-item {
                padding: 0 12px;
                margin: 5px 0;
                white-space: nowrap;
                &.active{
                  background-color: $baseColor;
                  >a{
                    color: #fff;
                  }
                }
                >a{
                  display: inline-block;
                  width: 100%;
                }
              }
            }
          }
          .main-menu-active {
            /*font-family: HelveticaNeue;*/
            font-size: 20px;
            color: #325570;
          }
        }
        .sub-menu {
          box-sizing: border-box;
          width: calc(100% - 450px);
          .sub-menu-list {
            box-sizing: border-box;
            height: 56px;
            text-align: right;
            .sub-menu-item {
              position: relative;
              display: inline-block;
              box-sizing: border-box;
              height: 56px;
              line-height: 56px;
              margin-right: 50px;
              cursor: pointer;
              z-index:100;
              &:last-child{
                margin-right: 0;
              }
              >a{
                display: inline-block;
                width: 100%;
               /* font-family: HelveticaNeue;*/
                font-size: 18px;
                color: #96ACB9;
                .drop-icon{
                  position: absolute;
                  right: -24px;
                  display: none;
                  font-size:26px;
                  vertical-align: middle;
                }
              }
              &.active {
                >a{
                  color: $baseColor;
                  .drop-icon{
                    color: $baseColor;
                  }
                }
                border-bottom: 2px $baseColor solid;
              }
              &:hover{
                >a{
                  color: $baseColor;
                  .drop-icon{
                    display: inline-block;
                    color: $baseColor;
                  }
                }
                .third-menu-content{
                  display: block;
                }
              }
              .third-menu-content{
                position: absolute;
                display: none;
                top:56px;
                left: -2px;
                padding: 4px;
                .third-menu-list{
                  background: #FFFFFF;
                  box-shadow: 2px 7px 8px 0 rgba(200,217,232,0.60);
                  padding: 8px 0;
                  z-index:100;
                  .third-menu-item{
                    font-size: 14px;
                    color: #333;
                    text-align: left;
                    line-height: 28px;
                    padding: 0 12px;
                    margin: 8px 0;
                    white-space: nowrap;
                    >a{
                      display: inline-block;
                      width: 100%;
                    }
                    &:not(.active):hover{
                      >a{
                        color: $baseColor;
                      }
                    }
                    &.active{
                      background-color: $baseColor;
                      >a{
                        color: #fff;
                      }
                    }

                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .input-search-show-enter-active,.input-search-show-leave-active {
    transition: all .3s ease;
  }
  .input-search-show-enter, .input-search-show-leave-active {
   /* transform: translate3d(10px,0,0);*/
    opacity: 0;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #FFF;
  }
  input:-moz-placeholder, textarea:-moz-placeholder  {
    color: #FFF;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #FFF;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #FFF;
  }
</style>
